import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as homeActions from '../actions/home';
import 'font-awesome/scss/font-awesome.scss';
import '../static/Home.scss';
import { Link } from 'react-router-dom'
import {getTimeCha} from '../utils/'
import FootMenu from '../components/FootMenu/FootMenu'

let logo = require('../static/images/login_bg.jpg');

/**
 * 主页
 */
class Home extends React.Component {

    constructor(props){
        super(props);
    }

    componentDidMount() {
        if(!this.props.userInfo.phone){
            this.props.actions.getUserInfo();
        }
        
    }

    oncClick = ()=>{
        
    }

    logout = ()=>{
        this.props.actions.logout();
    }

    render() {
        return (
            <div className="home">
                <div className="head">
                    <div className="headLeft">
                        <img className="headImg" src={logo}/>
                        <div className="memberName">{this.props.userInfo.phone}</div>
                    </div>
                    <div className="headRight">
                        <div className="t1">还有{getTimeCha(this.props.userInfo.endTime)}到期</div>
                        <div className="t2">{this.props.userInfo.endTime}到期</div>
                        <div className="czbtn">充值</div>
                        <div className="czbtn" onClick={this.logout}>退出登录</div>
                    </div>
                </div>

                <div className="menuList">
                    <ul>
                        <Link to={`/MemberInfo`}>
                            <li>
                                <i className="litem fa fa-user fa-fw"></i>我的账号<i className="r fa fa-angle-right"></i>
                            </li>
                        </Link>
                        <Link to={`/MemberData`}>
                            <li>
                                <i className="litem fa fa-address-card fa-fw"></i>我的资料<i className="r fa fa-angle-right"></i>
                            </li>
                        </Link>
                        <Link to={`/TiXianRecord`}>
                            <li><i className="litem fa fa-rmb fa-fw"></i>提现记录<i className="r fa fa-angle-right"></i></li>
                        </Link>
                        <Link to={`/EditPassword`}>
                            <li><i className="litem fa fa-lock fa-fw"></i>修改密码<i className="r fa fa-angle-right"></i></li>
                        </Link>

                        {/*
                        <li><i className="litem fa fa-handshake-o fa-fw"></i>我的邀请<i className="r fa fa-angle-right"></i></li>
                        <li><i className="litem fa fa-usd fa-fw"></i>我的佣金<i className="r fa fa-angle-right"></i></li>
                        */}
                    </ul>
                </div>

                <FootMenu {...this.props}/>
            </div>
        )
        
    }
}
const mapStateToProps = (state) => ({
    userInfo: state.data.userInfo,
});

const mapDispatchToProps = (dispatch) => {
  return {
    actions:bindActionCreators(homeActions, dispatch)
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);